<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
			body {
			  display: flex;
			  flex-direction: column;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url(https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg);
			  background-size: cover;
			}
			
			p {
			  margin: 0 9em;
			  font-size: 2em;
			  font-weight: 600;
			}
			
			.landIn {
			  display: flex;
			  flex-wrap: wrap;
			  line-height: 1.8;
			  color: white;
			  font-family: Lora, serif;
			  white-space: pre;
			}
			.landIn span {
			  animation: landIn 0.8s ease-out both;
			}
			
			@keyframes landIn {
			  from {
			    opacity: 0;
			    transform: translateY(-20%);
			  }
			  to {
			    opacity: 1;
			    transform: translateY(0);
			  }
			}
		</style>
	</head>
	<body>
		<p class="landIn">你不能要求拥有一个没有风暴的人生海洋，因为痛苦和磨难是人生的一部分，一个没有风暴的海洋，那不是海，是泥塘。 ​​​​</p>
	</body>
</html>
<script>
	"use strict";
	let landInTexts = document.querySelectorAll(".landIn");
	landInTexts.forEach(landInText => {
	    let letters = landInText.textContent.split("");
	    landInText.textContent = "";
	    letters.forEach((letter, i) => {
	        let span = document.createElement("span");
	        span.textContent = letter;
	        span.style.animationDelay = `${i * 0.05}s`;
	        landInText.append(span);
	    });
	});

</script>
